<template >
	<el-select
		ref="autoSelect"
		v-if="isRemote"
		size="small"
		v-bind="option"
		filterable
		:remote="isRemote"
		:remote-method="Search"
	>
		<el-option v-for="item in _source" :key="item.key" :label="item.value" :value="item.key"> </el-option>
	</el-select>
	<el-select v-else size="small" v-bind="option" filterable ref="autoSelect">
		<el-option v-for="item in _source" :key="item.key" :label="item.value" :value="item.key"> </el-option>
	</el-select>
</template>
<script>
import UrlHelper from '@/utils/urlHelper'
export default {
	name: 'AutoFormSelect',
	model: {
		prop: '_value',
		event: 'change',
	},
	props: {
		_value: {
			default: null,
		},
		option: {
			null: true,
		},
		source: {
			type: Array,
			default: new Array(),
		},
		uri: {
			type: String,
			null: true,
			default: null,
		},
		isRemote: {
			type: Boolean,
			null: true,
			default: false,
		},
		lookup: {
			type: String,
			null: true,
		},
		reloadLookup: {
			type: String,
			default: 'id',
		},
	},
	data() {
		return {
			netSource: [],
		}
	},
	mounted() {
		if (this.uri !== null && !this.isRemote) {
			this.$http.get(this.uri).then(res => {
				this.netSource = res.data
			})
		}
		this.loadValueByReload()
	},
	computed: {
		_source() {
			console.log('computed,', this.netSource)
			if (this.source.length > 0) {
				return this.source
			}
			return this.netSource
		},
	},
	methods: {
		loadValueByReload() {
			var modelValue = this.$refs.autoSelect.modelValue
			if (modelValue !== null) {
				var u = new UrlHelper(this.uri)
				u.setParam(this.reloadLookup, modelValue)
				this.$http.get(u.getUrl()).then(res => {
					this.netSource = res.data
				})
			}
		},
		Search(value) {
			if (value) {
				var u = new UrlHelper(this.uri)
				u.setParam(this.lookup, value)
				this.$http.get(u.getUrl()).then(res => {
					this.netSource = res.data
				})
			}
		},
	},
}
</script>
<style lang='scss' scoped>
</style>